<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>I would like to say: </p>
		<div id="d1"></div><div></div>
		<span id="s1">
			<div>
				<div>
					<p id="p1">I would like to say: </p>
				</div>
			</div>
		</span>
		<p class="p1">I would like to say: </p>
		<table id="t1" border="1" cellspacing="" cellpadding="">
			<thead>
				<tr><th>Header</th></tr>
			</thead>
			<tbody>
				<tr><td>Data</td></tr>
				<tr><td>Data</td></tr>
				<tr><td>Data</td></tr>
			</tbody>
		</table>
		
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// $("p").appendTo("div");
			/*
			内部插入：都插入子元素
				$(选择器).append(选择器)
				$("p").append("div");
					往p标签最后插入div标签
				$("p").appendTo("div");
					往div标签最后插入p标签
				$("p").prepend("div");
					往p标签最前面插入div标签
				$("p").prependTo("div");
					往div标签最前面插入p标签
			外部插入：平级元素
				$(选择器).after(内容);
				$("p").after("div");
				$("p").before("div");
				$(选择器).insertAfter(选择器)
				$(选择器).insertBefore(选择器)
			*/
		   // $("p").after("div");
		   // $("p").after("<div>这是一div元素</div>")
		   // $("p").before("<div>这是一div元素</div>")
		   //wrap(标签);
		   // $("p").wrap("#d1");//将p标签插入id为d1的标签中
		   // $("p").wrap("#s1");
		   // $("p").wrap("div");//将p标签插入到div标签中
		   // $("p").wrap("<div class='wrap'></div>");
		   // $("p").wrap("fdfjkdjfkd");//无效
		   //unwrap()：去除父标签，只去除最近的一层
		   // $("#p1").unwrap();
		   // $("table").empty();//把table标签内的元素全部删除
		   // $("tbody").empty();//不推荐
		   // $("#t1").find("tbody").empty();
		   $("#t1").find("tbody").find("tr").click(function() {
			   $("tr").css("background-color", "white");
			   $(this).css("background-color", "red");
		   });
		   //find寻找子元素，filter匹配的元素过滤
		   console.log($("p").filter("#p1"));
		   console.log($("p").find("#p1"));
		</script>
	</body>
</html>
